<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recursion</title>
</head>

<body>
  <div>Recursion Tree</div>
  <br>
  <div id="tree"></div>
  <br>
  <div id="tree1"></div>
  <script>
    const baseJsTreeData = {
      child: [{
          name: 'DOM&BOM',
          id: 'base',
          child: [{
              name: 'dom',
              id: 'dom',
              child: [{
                name: 'createElement',
                id: 'create',
                child: [{
                  name: 'outerHtml',
                  id: 'outer-html'
                }]
              }]
            },
            {
              name: 'bom',
              id: 'bom',
              child: [{
                name: 'localtion',
                id: 'localtion',
                child: [{
                  name: 'pathnane',
                  id: 'pathnane'
                }]
              }]
            }
          ]
        },
        {
          name: 'ASYNC',
          id: 'async',
          child: [{
              name: 'fetch',
              id: 'fetch'
            },
            {
              name: 'promise',
              id: 'promise'
            },
            {
              name: 'generator',
              id: 'generator'
            },
          ]
        },
        {
          name: 'HTTP',
          id: 'http',
          child: [{
              name: 'cookie',
              id: 'cookie'
            },
            {
              name: 'session',
              id: 'session'
            },
            {
              name: 'websoket',
              id: 'websoket'
            },
          ]
        },
      ]
    };

    const tree = document.getElementById('tree');

    const getChild = (arr) => {
      if (arr instanceof Array) {
        // for (let i = 0; i < arr.length; i++) {
        //   const p = document.createElement('p');
        //   p.innerHTML = arr[i].name;
        //   tree.appendChild(p);
        //   if (arr[i].child) {
        //     getChild(arr[i].child);
        //   }
        // }
        arr.forEach(i => {
          const p = document.createElement('p');
          p.innerHTML = i.name;
          tree.appendChild(p);
          if (i.child) {
            getChild(i.child);
          }
        })
      }
    }
    getChild(baseJsTreeData.child);


    const arr1 = [1, 2, 3, ['a', 'b', 'c'], 4, ['aa', 'bb', ['ccc', 'ddd', ['eeee', 'ffff']]]]
    const tree1 = document.getElementById('tree1');
    const result = [];
    const recursionArr = (arr) => {
      arr.forEach(i => {
        if (i instanceof Array) {
          recursionArr(i);
        } else {
          result.push(i);
        }
      })
      return result;
    }

    const res = recursionArr(arr1);
    tree1.innerHTML = 'tree1=> ' + res;
    console.log(res); // [1, 2, 3, "a", "b", "c", 4, "aa", "bb", "ccc", "ddd", "eeee", "ffff"]
  </script>
</body>

</html>